import React from 'react';
import { connect } from 'dva';
import { creator } from '@/utils/creator';
import { Table, Tag, Tooltip } from 'antd';
import Edit from './Edit';
class List extends React.Component {
  state = {
    visible: false,
    record: {},
  };
  toggle = () => {
    this.setState({ visible: !this.state.visible });
  };
  componentDidMount() {
    this.getGoodsList();
  }
  getGoodsList = () => {
    const paramsString = window.location.search;
    const searchParams = new URLSearchParams(paramsString);
    // 查询指定键名是否存在
    const tag = searchParams.get('tag');
    const { dispatch } = this.props;
    dispatch(creator('category/getGoodsList', { tag }));
  };

  showEdit = record => {
    this.setState(
      {
        record,
      },
      () => {
        this.toggle();
      },
    );
  };
  render() {
    const { goodsList } = this.props.category;
    const columns = [
      { title: '品名', dataIndex: 'name', width: 150, align: 'center' },
      {
        title: '标签',
        dataIndex: 'tags',
        width: 120,
        align: 'center',
        render: text =>
          text && text.length && text.map(item => <Tag key={item}>{item}</Tag>),
      },
      {
        title: '主图',
        dataIndex: 'mainPics',
        width: 120,
        align: 'center',
        render: urlArr => <img src={urlArr[0]} style={{ maxWidth: 80 }} />,
      },
      {
        title: '详情',
        dataIndex: 'detailPics',
        width: 120,
        align: 'center',
        render: urlArr => (
          <img src={urlArr[0]} style={{ maxWidth: 80, maxHeight: 80 }} />
        ),
      },
      { title: '货币', dataIndex: 'currency', width: 80, align: 'center' },
      { title: '成本价', dataIndex: 'costPrice', width: 80, align: 'center' },
      { title: '原价', dataIndex: 'originPrice', width: 80, align: 'center' },
      { title: '销售价', dataIndex: 'salePrice', width: 80, align: 'center' },
      { title: '库存量', dataIndex: 'stock', width: 80, align: 'center' },
      { title: '库存说明', dataIndex: 'stockText', width: 80, align: 'center' },
      { title: '重量', dataIndex: 'weight', width: 80, align: 'center' },
      { title: '保质期', dataIndex: 'expDate', width: 80, align: 'center' },
      {
        title: '是否为虚拟产品',
        dataIndex: 'virtual',
        width: 80,
        align: 'center',
        render: text => (text ? '是' : '否'),
      },
      {
        title: '是否在售',
        dataIndex: 'active',
        width: 80,
        align: 'center',
        render: text => (text ? '是' : '否'),
      },
      {
        title: '是否删除',
        dataIndex: 'deleted',
        width: 80,
        align: 'center',
        render: text => (text ? '是' : '否'),
      },
      {
        title: '是否包邮',
        dataIndex: 'freePost',
        width: 80,
        align: 'center',
        render: text => (text ? '是' : '否'),
      },
      {
        title: '备注',
        dataIndex: 'notice',
        width: 80,
        align: 'center',
        render: text => (
          <Tooltip title={text}>{text && text.slice(0, 10)}</Tooltip>
        ),
      },
      {
        title: '操作',
        width: 80,
        render: (text, record) => (
          <a onClick={this.showEdit.bind(this, record)}>编辑</a>
        ),
      },
    ];
    return (
      <div>
        <Table
          dataSource={goodsList}
          rowKey="_id"
          columns={columns}
          scroll={{ y: '85vh' }}
          pagination={{
            total: goodsList.length,
            showTotal: total => `共${total}件商品`,
          }}
        />
        <Edit
          visible={this.state.visible}
          toggle={this.toggle}
          record={this.state.record}
          getGoodsList={this.getGoodsList}
        />
      </div>
    );
  }
}

export default connect(({ category }) => ({ category }))(List);
